<template>
  <section class="h100 gamepay-panel">
    <van-row class="header-panel">
      {{ gameName }}
      <div class="arrow" @click="goToApp()">
        <van-icon name="arrow-left"/>
      </div>
    </van-row>

    <van-row class="pay-content">
      <van-row class="goods-panel">
        <van-row class="item">
          <van-row class="name">商品名称:</van-row>
          <van-row class="content">{{ productName }}</van-row>
        </van-row>
        <van-row class="item">
          <van-row class="name">订单金额:</van-row>
          <van-row class="content"><b class="red">￥{{ salePrice }}</b></van-row>
        </van-row>
      </van-row>
      <van-row class="pay-way">
        <van-row class="title">支付方式:</van-row>
        <van-row class="list">
          <div class="item" @click="onPayWayCheck('zhifubao')">
            <van-row class="name"><img :src="require('../../assets/images/icon/aipay.png')"/>支付宝支付{{ zfbDes }}</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='zhifubao'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('weixin')">
            <van-row class="name"><img :src="require('../../assets/images/icon/wechat.png')"/>微信支付</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='weixin'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

        </van-row>
      </van-row>
    </van-row>

    <van-row class="pay-footer">
      <div class="form-btns" @click="doGamePay()">立即支付
        {{ '￥' + salePrice }}
      </div>
    </van-row>

  </section>
</template>

<script>

export default {
  data() {
    return {
      initQuery: '',
      initOrderNum: '',
      gameName: '购买省钱卡',
      productName: '商品名称',
      salePrice: '0.00',
      zfbDes: '',
      payWayCode: "zhifubao",
    }
  },

  created() {
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      this.initQuery = this.$route.query;
      let initOrderNum = this.initQuery.initOrderNum;
      let userToken = this.initQuery.userToken;
      let sign = this.initQuery.sign;
      let time = this.initQuery.time;

      let params = {
        initOrderNum: initOrderNum,
        userToken: userToken,
        time: time,
        sign: sign,
      }
      this.$http(window.config.webHomeApiV2 + '/sqk/buy/init_center', params, "post", true, false).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
        } else {
          let resData = res.data;
          this.salePrice = resData.vipPriceData.salePrice;
          this.productName = resData.vipPriceData.name;
          this.initOrderNum = resData.initOrderNum;
        }
      });
    },

    //选择支付方式
    onPayWayCheck(payWayCode) {
      this.payWayCode = payWayCode;
    },


    //立即支付
    doGamePay() {
      let params = {
        initOrderNum: this.initOrderNum,
        payWayCode: this.payWayCode,
        userToken: this.initQuery.userToken,
      }
      this.$http(window.config.webHomeApiV2 + '/sqk/buy/order_pay', params, "post", true, false).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        let resData = res.data;
        window.location.href = resData['redUrl'];
      });
    },
    //返回盒子
    goToApp() {
      this.closeWebView("androidApp");
    },

    closeWebView(platform) {
      switch (platform) {
        case "androidApp":
          try {
            window.appAndroidJS.exitWebViewJS();
          } catch (error) {
            console.log("NativeAndroidJS错误exitWebViewJS：" + error.message);
          }
          break;
        case "iosApp":
          var message = {
            handleKey: "exitWebView"
          };
          try {
            window.webkit.messageHandlers.exitWebViewJS.postMessage(message);
          } catch (error) {
            console.log("Native苹果JS错误exitWebViewJS：" + error.message);
          }
      }
    }
  }
};
</script>


<style lang='less'>
@import "../../assets/css/sqkPay/index.less";
</style>
